<template>
  <div class="att">
    <div
      class="att-item"
      v-for="(item, index) in list"
      :key="index"
      @click="godetail(item.id)"
    >
      <img :src="item.img" alt="" />
      <p>{{ item.title }}</p>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          img: require("@/assets/Di/组23(3).png"),
          title: "张超 律师",
        },
        {
          id: 2,
          img: require("@/assets/Di/组23(4).png"),
          title: "张家亦 律师",
        },
        {
          id: 3,
          img: require("@/assets/Di/组23(5).png"),
          title: "王永健 律师",
        },
        {
          id: 4,
          img: require("@/assets/Di/组23(6).png"),
          title: "左婷 律师",
        },
      ],
    };
  },
  methods: {
    ...mapActions("di", ["detail"]),
    godetail(id) {
      this.detail(id);
      this.$router.push("/home/index/lawyer");
    },
  },
};
</script>

<style scoped lang="scss">
.att {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding-right: 0.32rem;
  .att-item {
    width: 1.36rem;
    position: relative;
    img {
      width: 100%;
    }
    p {
      width: 100%;
      position: absolute;
      top: 1.6rem;
      font-size: 0.24rem;
      color: #333333;
      text-align: center;
    }
  }
}
</style>